<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册账号页面</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/1.css"/>
</head>
<body> 
<div class="page-header">
    <h1>注册账号</h1>
    <h3 align="center" id="registerInfo" style="color: red"></h3>
</div>
<form id="user" action="" method="" >
    <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" class="form-control" name="name" id="username" placeholder="请输入用户名" />
        <span style="margin-left: 50px" id="usernameInfo"></span>
    </div>
    <div class="form-group">
        <label for="password">密码:</label>
        <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码" />
         <span id="checkPasswordInfo"></span>
    </div>
<%--    <div class="form-group">--%>
<%--        <label for="registerCode">请输入验证码:</label>--%>
<%--        <input type="text" class="form-control" name="registerCode" id="registerCode" placeholder="请输验证码" />--%>
<%--    </div>--%>
    <button type="button" onclick="register()" class="btn btn-primary">注册</button>
    &nbsp;&nbsp;&nbsp;
    <button type="button" onclick="location.href = '${pageContext.request.contextPath}/user/login-ui'" class="btn btn-success">跳转登录</button>
</form>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery.min.js"></script>
<script type="text/javascript">

    //注册
    function register() {
        var data = $("#user").serialize();
        $.post(
            "${pageContext.request.contextPath}/user/register",
            data,
            function (result) {
                if (result.code == 0) {
                    //注册成功
                    location.href = "${pageContext.request.contextPath}/user/login-ui"
                }else {
                    $("#registerInfo").html(result.msg)
                }
            },
            "json"
        )
    }
    <%--function register(){--%>
    <%--    var data=$("#user").serialize();--%>

    <%--    $.post(--%>
    <%--        "${pageContext.request.contextPath}/user/register",--%>
    <%--        data,--%>
    <%--        function (result) {--%>
    <%--            if (result.code==0){--%>
    <%--                location.href="${pageContext.request.contextPath}/user/login-ui"--%>
    <%--            } else {--%>
    <%--                alert(result.msg)--%>
    <%--            }--%>
    <%--        },--%>
    <%--        "json"--%>
    <%--    )--%>
    <%--};--%>



    //用户名异步校验
    $("#username").blur(function () {
        var username = $("#username").val();

        if (username != null && username.length >=2){
            $.ajax({
                url:"${pageContext.request.contextPath}/user/check-username",
                data:'{"username":"'+username+'"}',
                type:"POST",
                dataType:"json",
                success:function (result) {
                    if (result.code == 0){
                        $("#usernameInfo").html("用户名可用..").css("color","green")
                    }else {
                        $("#usernameInfo").html("用户名不可用..").css("color","red")
                    }
                },
                error:function () {
                    alert("服务器正忙，请稍后再试")
                },
                contentType:"application/json;charset=utf-8"
            })
        } else {
            alert("用户名长度要大于等于两位")
        }
    });

</script>
</html>